<!-- 生成海报 -->
<template>
	<view class="v-poster-page">
		<!-- 海报 -->
		<image :src="path" mode="widthFix" @click="handlePreviewImg([path], 0)" class="v-border"></image>
		<!-- basePainter 当path（海报路径为空）时进入失败返回绘制海报 -->
		<sunui-painter isRenderBlob custom-style="position: fixed; left: 200%;" :isRenderImage="true"
			:board="basePainter" @success="getSuccessInfo" @fail="getFailInfo"></sunui-painter>
		<view class="flex-column" v-if="path">
			<view class="btnCss2 flex" @click="save()">保存图片</view>
			<view class="v-cancel" @click="cancel()">取消</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				basePainter: {},
				path: '',
				poster: '/static/notImg.png',
				qrcode: '',
				options: {},
				detailInfo: {},
				avatarUrl: '/static/avatar.png',
				activitType: ''
			};
		},
		onLoad(options) {
			var pages = getCurrentPages(); //当前页
			var beforePage = pages[pages.length - 2]; //上个页面
			this.detailInfo = beforePage.$vm.detailInfo;
			this.activitType = beforePage.$vm.activitType
		},
		onShow() {
			this.getPoster();
		},
		methods: {
			// 保存图片
			save() {
				uni.saveImageToPhotosAlbum({
					filePath: this.path,
					success: result => {
						this.$sun.toast('保存成功，可以去分享啦~');
					},
					fail: err => {
						this.$sun.toast('保存失败，稍后再试');
					}
				});
			},
			// 取消
			cancel() {
				this.$sun.navBack();
			},
			async getPoster() {
				// type 1:团购 2：普通商品
				let groupId = this.type == 1 ? this.detailInfo.id : '';
				let goodsId = this.type == 2 ? this.detailInfo.id : '';
				const result = await this.$http.get({
					url: this.$api.goodsQrcode,
					data: {
						// 产品id
						goods_id: this.detailInfo.id,
						// 用户id
						uid: uni.getStorageSync('uid'),
						type: Number(this.activitType)+1

					}
				});
				if (result.errno == 0) {
					this.qrcode = result.data;
					this.handleShare();
				} else {
					this.$sun.toast(result.message);
				}
			},

			// 海报生成以后的路径
			getSuccessInfo(e) {
				this.path = e;
				uni.hideLoading();
			},
			// 海报生成失败的路径
			getFailInfo(e) {
				uni.showModal({
					title: '提示',
					content: `${JSON.stringify(e)}`,
					showCancel: false
				});

				this.$sun.delay(2, () => {
					uni.hideLoading();
				});
			},
			handleShare() {
				let poster = this.detailInfo.pic_url ? this.detailInfo.pic_url : this.poster;
				let qrcode = this.qrcode;
				// let summary = this.detailInfo.summary ? this.detailInfo.summary : '';
				uni.showLoading({
					title: '海报生成中...'
				});

				if (this.path) {
					this.getSuccessInfo(this.path);
				} else {
					this.basePainter = {
						width: '750rpx',
						height: '1184rpx',
						background: '#f7f7f7',
						views: [{
								type: 'view',
								css: {
									left: '20rpx',
									top: '24rpx',
									background: '#ffffff',
									radius: '10rpx',
									width: '710rpx',
									height: '1084rpx'
								}
							},
							{
								type: 'image',
								url: `${this.detailInfo.developer_name ? this.avatarUrl : ''}`,
								mode: 'widthFix',
								css: {
									left: '52rpx',
									top: '1004rpx',
									width: '54rpx',
									height: '54rpx',
									radius: '50%',
									color: '#999'
								}
							},
							{
								type: 'text',
								text: `${this.detailInfo.developer_name ? this.detailInfo.developer_name : ''}`,
								css: {
									color: '#333',
									left: '120rpx',
									top: '1010rpx',
									fontSize: '32rpx',
									fontWeight: 'bold'
								}
							},

							{
								type: 'image',
								url: `${poster}`,
								mode: 'widthFix',
								css: {
									left: '52rpx',
									top: '60rpx',
									width: '636rpx',
									height: '636rpx'
								}
							},
							{
								type: 'text',
								text: `￥${this.detailInfo.money}`,
								css: {
									color: '#FF3326',
									left: '52rpx',
									top: '742rpx',
									fontSize: '40rpx',
									fontWeight: 'bold'
								}
							},
							{
								type: 'text',
								text: `${this.detailInfo.name?this.detailInfo.name:this.detailInfo.goods_name}`,
								css: {
									color: '#000',
									left: '52rpx',
									top: '842rpx',
									fontSize: '32rpx',
									fontWeight: 'bold'
								}
							},

							{
								type: 'image',
								url: `${qrcode}`,
								mode: 'widthFix',
								css: {
									left: '530rpx',
									top: '894rpx',
									width: '180rpx',
									height: '180rpx'
								}
							}
						]
					};
				}
			}
		}
	};
</script>

<style lang="less">
	page {
		background-color: #f7f7f7;
	}

	.v-poster-page {
		.v-border {
			border-radius: 10rpx;
			width: 750rpx;
		}

		.v-poster-content {
			height: 1082rpx;
			background: #ffffff;
			border-radius: 10rpx;
			margin: 24rpx 20rpx 68rpx;
		}

		.v-cancel {
			padding: 36rpx;
			font-size: 36rpx;
			color: #8f8f8f;
		}
	}
</style>